<template>
	<view>
		<view v-if="!butDdis">
			<view class="box">
				<view :class="mealId==item.id ?'li':'li2'" v-for="item in packageList" :key="item.id"
					@click="chekcMeal(item.id)">
					<view class="title">
						{{ item.name }}
					</view>
					<view class="price">
						<text style="font-size: 24rpx;">￥</text>{{ item.price / 100 }}
					</view>
					<view class="contxt">
						酒{{ item.num }}瓶
					</view>
					<view class="contxtInfo">
						(内含)
					</view>
					<view class="content">
						<view class="contentLi" v-for="info in item.infos" :key="info.id">
							{{ info.name }}：{{ info.num }}瓶
						</view>
					</view>
				</view>
			</view>
			<view class="explain">
				<view class="exTxt">
					注：购买套餐后，每次消费优先消耗套餐酒类瓶数。套餐瓶数消耗完毕后，则可单点购买酒类，且额外购买的酒类，全部永久享受半价优惠。
				</view>
				<button class="but" @click="payMeal">提交</button>
			</view>
		</view>
		<myMeal :data="mealData" v-else></myMeal>
	</view>
</template>

<script>
	import {
		getPackageList,
		orderGet,
		createOrder,
		payStatus
	} from '@/api/package/package.js'
	import {
		paySubmit
	} from '@/api/wine/wine.js'
	import {
		weixinPay
	} from "@/api/weixinPay/weixinPay.js"
	import myMeal from '@/pagesA/components/myMeal/myMeal.vue'
	export default {
		components: {
			myMeal
		},
		data() {
			return {
				packageList: [],
				butDdis: false, //控制按钮是否隐藏
				mealId: 0, //选择套餐的id
				myMealData: {},
				//定时器相关
				timer: null, // 用于存储定时器ID
				count: 0, // 用于记录执行次数
				//传递给子组件的值
				mealData: {},
			}
		},
		onLoad() {
			this.getMeal()
		},
		beforeDestroy() {
			// 组件销毁前清除定时器，避免内存泄漏
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			//定时器
			startTimer(e) {
				let that = this
				this.count++; // 数量加1

				// 定义定时器执行的函数
				const timerFunc = () => {
					let data = {
						id: e,
						sync: true
					}
					// 轮询是否支付成功
					payStatus(data).then((res) => {
						if (res.data.status == 10) {
							this.clearTimer();
							uni.$u.toast('支付成功')
							setTimeout(() => {
								orderGet().then(res2 => {
									uni.hideLoading()
									if (res2.code == 0) {
										// console.log('套餐订单',res2)
										if (res2.data) {
											that.mealData = res2.data
											that.butDdis = true
										}
									}
								})
							}, 1000)
						}
					});
					// 如果执行了10次，也清除定时器
					if (this.count >= 10) {
						uni.hideLoading()
						this.clearTimer();
						uni.$u.toast('支付状态查询失败，请5分钟后重试')
						setTimeout(() => {
							that.$tab.navigateBack(1)
						}, 5000)
					}
				};

				// 设置定时器，每2秒执行一次timerFunc
				this.timer = setInterval(timerFunc, 2000);
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer); // 清除定时器
					this.timer = null; // 将定时器ID置空
					console.log('定时器已清除');
				}
			},
			//购买套餐
			payMeal() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					packageId: that.mealId
				}
				createOrder(data).then(res => {
					if (res.code == 0) {
						let data2 = {
							id: res.data,
							channelCode: "wx_lite",
							channelExtras: {
								openid: uni.getStorageSync('openid')
							}
						}
						paySubmit(data2).then(response2 => {
							if (response2.code == 0) {
								let payData = JSON.parse(response2.data.displayContent)
								weixinPay(payData).then(response3 => {
									that.startTimer(res.data)
								})
							}
						})
					}
				})
			},
			//选择套餐
			chekcMeal(e) {
				this.mealId = e
			},
			getMeal() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getPackageList().then((res) => {
					const {
						data
					} = res;
					that.packageList = data
					that.mealId = data[0].id
				});
				orderGet().then(res2 => {
					uni.hideLoading()
					if (res2.code == 0) {
						// console.log('套餐订单',res2)
						if (res2.data) {
							that.mealData = res2.data
							that.butDdis = true
						}
					}
				})
			},
			//根据id判断
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.box {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		padding-bottom: 200rpx;
	}

	.li {
		width: 330rpx;
		height: 574rpx;
		margin: 20rpx 0 0 30rpx;
		background: #E84E22;
		border-radius: 20rpx;
		color: #fff;
	}

	.li2 {
		width: 330rpx;
		height: 574rpx;
		margin: 20rpx 0 0 30rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
	}

	.title {
		width: 330rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		margin-top: 56rpx;
	}

	.price {
		width: 330rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-weight: bold;
		font-size: 40rpx;
		text-align: center;
		margin-top: 28rpx;
	}

	.contxt {
		width: 330rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		margin-top: 60rpx;
		text-align: center;
	}

	.contxtInfo {
		width: 330rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.content {
		width: 330rpx;
		height: fit-content;
		margin-top: 30rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.contentLi {
		margin-top: 5rpx;
	}

	.explain {
		width: 690rpx;
		height: 200rpx;
		position: fixed;
		bottom: 0;
		left: 30rpx;
	}

	.exTxt {
		width: 690rpx;
		height: 56rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.but {
		width: 690rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #E84E22;
		border-radius: 50rpx;
		margin-top: 30rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>